<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<a href="javascript:history.back();" class="back-button">
				<i class="fa fa-arrow-left"></i> 返回
			</a>
			<p>用户注册</p>
		</header>

		<!-- 表单部分 -->
		<ul class="form-box">
			<li>
				<div class="title">
					手机号码：
				</div>
				<div class="content">
					<input type="text" @blur="checkUserId" v-model="user.userId" placeholder="手机号码">
				</div>
			</li>
			<li>
				<div class="title">
					密码：
				</div>
				<div class="content">
					<PasswordStrength v-model="user.password" />
				</div>
			</li>
			<li>
				<div class="title">
					确认密码：
				</div>
				<div class="content">
					<input type="password" v-model="confirmPassword" placeholder="确认密码">
				</div>
			</li>
			<li>
				<div class="title">
					用户名称：
				</div>
				<div class="content">
					<input type="text" v-model="user.userName" placeholder="用户名称">
				</div>
			</li>
			<li>
				<div class="title">
					性别：
				</div>
				<div class="content" style="font-size: 3vw;">
					<input type="radio" v-model="user.userSex" value="1" style="width:6vw;height: 3.2vw;">男
					<input type="radio" v-model="user.userSex" value="0" style="width:6vw;height: 3.2vw;">女
				</div>
			</li>
		</ul>

		<div class="button-login">
			<button @click="register">注册</button>
		</div>
		<div style="height: 0.1vw;"></div>
		<CustomAlert ref="customAlert" />
		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
import Footer from '../components/Footer.vue';
import PasswordStrength from '../components/PasswordStrength.vue';
import CustomAlert from '../components/CustomAlert.vue';

export default {
	name: 'Register',
	data() {
		return {
			user: {
				userId: '',
				password: '',
				userName: '',
				userSex: 1
			},
			confirmPassword: '',
		}
	},
	methods: {
		checkUserId() {
			this.$axios.get(`Users/userId/${this.user.userId}`)
				.then(response => {
					if (response.data == 1) {
						this.user.userId = '';
						this.$refs.customAlert.showAlert('此手机号码已存在！')
					}
				}).catch(error => {
					console.error(error);
				});
		},
		register() {
			if (this.user.userId == '') {
				this.$refs.customAlert.showAlert('手机号码不能为空！');
				return;
			}
			if (!/^1[356789]\d{9}$/.test(this.user.userId)) {
				this.$refs.customAlert.showAlert('请输入正确的手机号码！');
				return;
			}
			if (this.user.password == '') {
				this.$refs.customAlert.showAlert('密码不能为空！');
				return;
			}
			if (this.user.password != this.confirmPassword) {
				this.$refs.customAlert.showAlert('两次输入的密码不一致！');
				return;
			}
			if (this.user.userName == '') {
				this.$refs.customAlert.showAlert('用户名不能为空！');
				return;
			}

			//注册请求
			this.$axios.post(`Users/userId/${this.user.userId}/password/${this.user.password}/userName/${this.user.userName}/userSex/${this.user.userSex}`)
				.then(response => {
					if (response.data > 0) {
						this.$refs.customAlert.showAlert('注册成功！');
						this.$router.go(-1);
					} else {
						this.$refs.customAlert.showAlert('注册失败！');
					}
				}).catch(error => {
					console.error(error);
				});
		}
		/*sendCode() {
			//发送验证码请求
			this.$axios.post('/api/send_code', { phone_number: this.phonenumber }).then(response => {
				//请求成功后将sended设为true，按钮禁用，并显示倒计时
				this.sended = true;
				this.btnTxt = '已发送';
				let countDown = 60;
				const timer = setInterval(() => {
					if (countDown > 0) this.btnTxt = '${countDown}s 后重试';
					else {
						this.sended = false;
						this.btnTxt = '获取验证码';
						clearInterval(timer);
					}
					countDown--;
				}, 1000);
				console.log('验证码已发送');
			});
		}*/
	},
	components: {
		Footer,
		PasswordStrength,
		CustomAlert
	}
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;

	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;

	display: flex;
	justify-content: center;
	align-items: center;
}

.back-button {
	position: absolute;
	top: 3.5vw;
	/* 使用相对单位 */
	left: 2.5vw;
	/* 使用相对单位 */
	font-size: 4vw;
	/* 使用相对单位 */
	text-decoration: none;
	color: white;
	display: flex;
	align-items: center;
}

.back-button i {
	margin-right: 1vw;
	/* 使用相对单位 */
}

/* 针对大屏幕 (如 iPad) 的媒体查询 */
@media (min-width: 768px) {
	.wrapper header {
		height: 8vh;
		/* 使用相对高度单位 */
		font-size: 3vh;
	}

	.back-button {
		position: absolute;
		top: 3.5vw;
		/* 使用相对单位 */
		left: 2.5vw;
		/* 使用相对单位 */
		font-size: 4vw;
		/* 使用相对单位 */
		text-decoration: none;
		color: white;
		display: flex;
		align-items: center;
	}

	.back-button i {
		margin-right: 1vw;
		/* 使用相对单位 */
	}

	/* 针对大屏幕 (如 iPad) 的媒体查询 */
	@media (min-width: 768px) {
		.wrapper header {
			height: 8vh;
			/* 使用相对高度单位 */
			font-size: 3vh;
		}

		.back-button {
			top: 2.5vh;
			/* 使用相对高度单位 */
			left: 2vh;
			font-size: 2.5vh;
			/* 相对大小单位 */
		}

		.back-button i {
			margin-right: 0.5vh;
		}
	}

	/****************** 表单部分 ******************/
	.wrapper .form-box {
		width: 100%;
		margin-top: 12vw;
	}

	.back-button i {
		margin-right: 0.5vh;
	}
}

/****************** 表单部分 ******************/
.wrapper .form-box {
	width: 100%;
	margin-top: 12vw;
}

.wrapper .form-box li {
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
	display: flex;
	align-items: center;
}

.wrapper .form-box li .title {
	flex: 0 0 18vw;
	font-size: 3vw;
	font-weight: 700;
	color: #666;
}

.wrapper .form-box li .content {
	flex: 1;
}

.wrapper .form-box li .content input {
	border: none;
	outline: none;
	width: 100%;
	height: 4vw;
	font-size: 3vw;
}

.wrapper .button-login {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
}

.wrapper .button-login button {
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	color: #fff;
	background-color: #38CA73;
	border-radius: 4px;

	border: none;
	outline: none;
}

.wrapper .content el-button {
	width: 100%;
	height: 4.7vw;
	font-size: 3vw;
	font-weight: 700;
	color: #8f8b8b;
	background-color: #fefefe;
	border-radius: 4px;
	border: none;
	outline: none;
}

.wrapper .button-register {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
}

.wrapper .button-register button {
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	color: #666;
	background-color: #EEE;
	border-radius: 4px;

	border: none;
	outline: none;
	border: solid 1px #DDD;
}
</style>